<template>
    <div class='InboundList-box'>
       <!-- 活动详情 -->
        <!-- 测试 -->
        <div class="first">
           <h3>活动详情</h3>
           <p v-show="activityStatus===1" class="first-p">未开始</p>
           <p v-show="activityStatus===2" class="first-p">报名中</p>
           <p v-show="activityStatus===3" class="first-p">进行中</p>
           <p v-show="activityStatus===4" class="first-p">已结束</p>
        </div>
        <div class="second">
           <el-form :model="form" label-position="top" ref="userRef" label-width="80px">
            <div class="formItembox">
                  <el-form-item class="formItem" label="活动名称" prop="title">
                     <el-input disabled v-model="form.title" placeholder="请输入活动名称" maxlength="11" />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名开始时间" prop="signupStart">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.signupStart"
                         type="datetime"
                         placeholder="请选择报名开始时间"
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="报名截止时间" prop="signupEnd">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.signupEnd"
                         type="datetime"
                         placeholder="请选择报名截止时间"
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动开始时间" prop="activityStart">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.activityStart"
                         type="datetime"
                         placeholder="选择活动开始时间"
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动结束时间" prop="activityEnd">
                     <el-date-picker
                       disabled
                       class="input"
                         v-model="form.activityEnd"
                         type="datetime"
                         placeholder="选择活动结束时间"
                       />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动地点" prop="address">
                     <el-input disabled v-model="form.address" placeholder="请输入活动地点" maxlength="11" />
                  </el-form-item>
                  <el-form-item class="formItem" label="活动范围" prop="activityScopeList">
                     <!-- 活动范围 -->
                     <el-input disabled v-model="form.activityScopeList" placeholder="请输入活动范围" maxlength="11" />
                  </el-form-item>
                  <el-form-item class="formItem" label="得分标准" prop="scoreType">
                     <el-select disabled v-model="form.scoreType" placeholder="请选择得分标准">
                        <el-option label="参与得分" value="1">参与得分</el-option>
                        <el-option label="指标评分" value="2">指标评分</el-option>
                        <el-option label="区间得分" value="3">区间得分</el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item class="formItem" label="活动类型" prop="activityCategoryId">
                     <el-select disabled v-model="form.activityCategoryId" placeholder="请选择活动类型">
                        <el-option
                           v-for="item in activityTypes"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                        ></el-option>
                     </el-select>
                  </el-form-item>
                   <el-form-item class="formItem" label="状态">
                      <el-radio-group disabled v-model="form.isOpen">
                         <el-radio label="0" value="0">开启</el-radio>
                         <el-radio label="1" value="1">关闭</el-radio>
                      </el-radio-group>
                   </el-form-item>          
                  <el-form-item class="formItem" label="活动内容">
                     <el-input disabled v-model="form.content" type="textarea" placeholder="请输入内容"></el-input>
                  </el-form-item>
            </div>
         </el-form>
        </div>
        <div class="three" v-if="userPostId !== 2">
           <h3 class="mb16">报名信息</h3>
           <!-- 搜索栏 -->
           <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
           <!-- 增删改查 -->
           <div class="function-box" v-if="checkPermi(['system:inventory:edit'])">
                   <el-button @click="activityPassS" v-show="activityStatus===2" class="addBtn2">通过</el-button>
                   <el-button @click="activityRejectS" v-show="activityStatus===2" class="delBtn2">拒绝</el-button>
                   <el-button @click="activityDels" v-show="activityStatus===3 || activityStatus===2" class="delBtn2">移除</el-button>
           </div>
           <!-- 活动详情页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="total"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :activityDetailShow="activityDetailShow"
      @scoring="scoring"
      @activityDel="activityDel"
      @activityPass="activityPass"
      @activityReject="activityReject"
      :activityStatus="activityStatus"
      :pagination="inventoryTableData.length>0"
    >
    </forTableCom>

    <!-- 赋分弹出框 -->
       <el-dialog class="custom-dialog" :title="title2" v-model="open2" width="500px" append-to-body>
         <el-form :model="form2"  label-position="top" ref="userRef2" label-width="80px">
            <div>
                  <el-form-item  label="请赋分" prop="creditValue">
                     <el-input @input="changeInput"  v-model="form2.creditValue" placeholder="非必填" maxlength="30" />
                  </el-form-item>
                  <el-form-item  label="原因">
                     <el-input  v-model="form2.remark" type="textarea" placeholder="非必填"></el-input>
                  </el-form-item>
            </div>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel">{{ form.userId == undefined? '重置' : '取消' }}</el-button>
               <el-button type="primary" @click="submitForm2">提交</el-button>
            </div>
         </template>
       </el-dialog>
       <!-- 拒绝弹出框 -->
       <el-dialog class="custom-dialog" :title="title3" v-model="open3" width="500px" append-to-body>
         <el-form :model="form3"  label-position="top" ref="userRef2" label-width="80px">
            <div>
                  <el-form-item  label="原因">
                     <el-input  v-model="form3.content" type="textarea" placeholder="非必填"></el-input>
                  </el-form-item>
            </div>
         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="cancel">{{ form.userId == undefined? '重置' : '取消' }}</el-button>
               <el-button type="primary" @click="submitForm3">提交</el-button>
            </div>
         </template>
       </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs,onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {activityDetail,activityDetail2,activityScoring,activityDelete,activityPassAll} from '@/api/activityClassify/activityList.js'
import {getdeptApi} from '@/api/system/notice.js'
import {listUser} from '@/api/activityClassify/activityClassifyType.js'
import { checkPermi } from '@/utils/permission.js'
import serchForm from '@/components/inventory/serchForm.vue'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const router = useRouter();
const route = useRoute();
const data = reactive({});

const id = route.params.id // 动态路由传过来的值用params接收
const title2 = ref('赋分')
const title3 = ref('拒绝')
const open2 = ref(false);
const open3 = ref(false);
const form2 = ref({
     creditValue:'',      //赋分
     remark:'',        //备注原因内容
  })
const form3 = ref({
     remark:'',        //备注原因内容
  })
// 表单
let inventoryForm = ref({
  nickName:'',//学生姓名
  userName: '', // 学号
  deptId: '', // 组织
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'nickName',
    label: '学生姓名',
  },
  {
    name: 'userName',
    label: '学号',
  },
  {
    name: 'deptId',
    label: '组织',
    type:'weixiao'
  },
])
// 查找
const onSearch = (v) => {
  console.log(v,'查看入库页面时间参数')
  // 每次查询后回到页1
  pageNum.value = 1
  getDetail2(v)
}
const form = ref({
     title:'', //活动名称
     signupStart:'', //报名开始时间
     signupEnd:'', //报名截止时间
     activityStart:'', //活动开始时间
     activityEnd:'', //活动结束时间
     address:'', //活动地点
     activityScopeList:'', //活动范围
     scoreType:'', //得分标准
     activityCategoryId:'', //活动类型
     coverImageUrl:'',      //活动封面
     attachment:'',
     content:'',     //活动内容
     type:1,       //区分教师和学生
     isOpen:'0'    //状态
  })

// 显示操作栏
const activityDetailShow = ref(true)
let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
const piliangIds = ref('')
let ids = []
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v.map(item => item.id);        //过滤id
    ids = Array.from(multipleSelection.value)              //批量通过/拒绝用的
    piliangIds.value = multipleSelection.value.join(',')   //批量删除用的
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  // let params = inventoryForm.value
  // listUser(params)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'userName',
    label: '学号',
  },
  {
    prop: 'nickName',
    label: '学生姓名',
  },
  {
    prop: 'deptNameList',
    label: '所属组织',
  },
  {
    prop: 'applyTime',
    label: '报名时间',
    applyTimeActivityShow:true
  },
  {
    prop: 'score',
    label: '获得积分',
    scoreActivityShow:true
  },
  {
    prop: 'status',
    label: '状态',
    statusDeatailActivityShow:true
  },
])
// 表格数据内容
let inventoryTableData = ref([])
const activityDel = (val)=>{  //列表单个删除操作
      let {i , v} = val
      ElMessageBox.confirm(
    '确定要删除该数据吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         activityDelete(v.id).then(res=>{
              if(res.code===200){
                   ElMessage({
                 message: '删除成功',
                 type: 'success',
               })
               getDetail2()
              }
         })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
//批量通过
const activityPassS = ()=>{
    if(ids.length===0){
      ElMessage({
                 message: '请先选择要通过的数据',
                 type: 'error',
               })
       return false
  }
  ElMessageBox.confirm(
    '确定要批量通过该报名吗?',
    '通过',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        let obj={
           ids:ids,
           status:1
        }
         activityPassAll(obj).then(res=>{
              if(res.code===200){
                   ElMessage({
                 message: '批量通过成功',
                 type: 'success',
               })
               getDetail2()
              }
         })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
//批量拒绝
const activityRejectS = ()=>{
    if(ids.length===0){
      ElMessage({
                 message: '请先选择要拒绝的数据',
                 type: 'error',
               })
       return false
  }
   open3.value = true
}
//批量删除
const activityDels = ()=>{
    if(ids.length===0){
      ElMessage({
                 message: '请先选择要删除的数据',
                 type: 'error',
               })
       return false
  }
   ElMessageBox.confirm(
    '确定要批量删除该数据吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         activityDelete(piliangIds.value).then(res=>{
         if(res.code===200){
           ElMessage({
                 message: '删除成功',
                 type: 'success',
               })
               getDetail2()
         }
       })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

let rejectId = ref(-1)
const activityReject = (val)=>{ //拒绝按钮
    let {i , v} = val
    rejectId.value = v.id
    open3.value = true
}
const submitForm3 = ()=>{  //拒绝提交按钮
    let obj={
           ids:ids.length > 0 ? ids : [rejectId.value],
           status:2,
           reviewComment:form3.value.remark
        }
        activityPassAll(obj).then(res=>{
              if(res.code===200){
                   ElMessage({
                 message: '拒绝成功',
                 type: 'success',
               })
               open3.value = false
               getDetail2()
              }
         })
}
const activityPass = (val)=>{ //通过按钮
    let {i , v} = val
    ElMessageBox.confirm(
    '确定要通过该报名吗?',
    '通过',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        let obj={
           ids:[v.id],
           status:1
        }
         activityPassAll(obj).then(res=>{
              if(res.code===200){
                   ElMessage({
                 message: '通过成功',
                 type: 'success',
               })
               getDetail2()
              }
         })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

const sourceIdcopy = ref(-1)
const scoring = (val)=>{ //赋分按钮
    let {i , v} = val
    open2.value = true
    sourceIdcopy.value = v.userId
    form2.value.creditValue=''
    form2.value.remark=''
}
const submitForm2 = ()=>{  //赋分提交按钮
      let obj = {
        sourceId:id,
        creditSource:2,
        creditValue:form2.value.creditValue,
        remark:form2.value.remark,
        userId:sourceIdcopy.value
    }
          activityScoring(obj).then(res=>{
         if(res.code===200){
             ElMessage({
                 message: '赋分成功',
                 type: 'success',
               })
               open2.value = false
               getDetail2()
         }
    })
}

const activityStatus = ref('')
const getDetail = ()=>{  //获取详情数据
    activityDetail(id).then(res=>{
        if(res.code===200){
             form.value.title = res.data.title
             form.value.signupStart = res.data.signupStart
             form.value.signupEnd = res.data.signupEnd
             form.value.activityStart = res.data.activityStart
             form.value.activityEnd = res.data.activityEnd
             form.value.address = res.data.address
             form.value.scoreType = String(res.data.scoreType)
             form.value.activityCategoryId = res.data.activityCategoryId
             form.value.content = res.data.content
             form.value.activityScopeList = res.data.activityScopeNameList.join(' / ')
             activityStatus.value = res.data.status
             form.value.isOpen = String(res.data.isOpen)
        }
    })
}

let activityStatus2 = ref('')
const getDetail2 = (data = '')=>{  //获取详情页面里面的列表数据
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    activityId:id
  }
  let params = Object.assign(data, page)
    activityDetail2(params).then(res=>{
        if(res.code===200){
             inventoryTableData.value = res.rows
            //  activityStatus2.value = res.rows.status
             
             total.value = res.total
        }
    })
}
// 获取活动范围下拉信息
const genderOptions = ref([])
const getdeptApiFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, data} = await getdeptApi(page)
  if (code === 200) {
    genderOptions.value = data
  }
}
// 获取活动类型下拉信息
const activityTypes = ref([])
const listUserFn = async () => {
  let page = {
    pageNum: 1,
    pageSize: -1,
  }
  let {code, rows} = await listUser(page)
  if (code === 200) {
    activityTypes.value = rows
    let rowList = []
  rows.forEach((v) => {
    rowList.push({
      value: v.id,
      label: v.name,
    })
  })
  activityTypes.value = rowList
  }
}
const userPostId = ref('')
onMounted(()=>{
  // 1 教师 2 学生
  userPostId.value = JSON.parse(localStorage.getItem('userInfo')).postIds[0]
  console.log(userPostId.value,'userPostId.value')
    Promise.all([getDetail(),getDetail2(),getdeptApiFn(),listUserFn()])
})
</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    .first {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .first-p{
       background-color: #ccc;
       margin-left: 10px;
    }
  }
}
.formItembox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // justify-content: center;
      box-sizing: border-box;

      .formItem {
        width: 30%;
        margin-right: 50px;
      }
      .formItem:last-child {
        width: 100%;
        margin-right:0;
      }
      .formItem:nth-child(3) {
        margin-right:0;
      }
      .formItem:nth-child(6) {
        margin-right:0;
      }
      .formItem:nth-child(9) {
        margin-right:0;
      }
    }
:deep(.el-select .el-input__wrapper) {  //下拉框
  width: 280px;
}
:deep(.el-date-editor){  //日期选择器
   width: 280px;
}
.formItem :deep(.el-input) {  //input输入框
  width: 280px;
}
:deep(.el-textarea__inner){   //文本域
    height: 80px;
}
</style>
